const history = function () {
    /**没有历史记录的一般情况 */
    // function toggle() {
    //     let value = $('#myRange').val()
    //     $('#output').text(value)
    //     $('#myProgress').val(value)
    // }
    // toggle()
    // $('#myRange').on('change', function () {
    //     toggle()
    // })

    /**有历史记录的情况 */
    let state,initState
    window.onpopstate = popState
    window.onload = firstTimeLoad

    function firstTimeLoad() {
        state = {
            id:1,
            value: $('#myRange').val()
        }
        initState = Object.assign({},state)
        $('#myRange').on('change',changeAction)
        display(state)
    }

    function changeAction(){
        state.id++
        state.value = $(this).val()
        save(state)
        display(state)
    }

    function popState(event){
        if(event.state){
            state = event.state
            display(state)
        }else{
            display(initState)
        }
    }

    function save(state){
        let url = '#history-' + state.id
        window.history.pushState(state,'',url)
    }


    function display(state){
        $('#myRange').val(state.value)
        $('#output').text(state.value)
        $('#myProgress').val(state.value)

    }
}

export { history }